import './style.scss'

function isNone(v) {
  if (v === undefined || v === null || v === '') return true
  if (v instanceof Array && v.length === 0) return true
}

function filtersItem(property, value, operator, id) {
  if (id === undefined) {
    id = Math.floor(Math.random() * 0xfffffff).toString(16)
  }
  if (value instanceof Array) {
    value = value.join(',')
  }
  return {
    property,
    operator: operator || 'like',
    value,
    id
  }
}

const formContainer = {
  name: 'CFormContainer',
  abstract: true,
  props: {
    column: {
      type: Number,
      default: 1
    },
    bottom: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: undefined
    },
    gutter: {
      type: Number,
      default: 12
    }
  },
  render(h) {
    let slot
    if (this.$scopedSlots.default instanceof Function) {
      slot = this.$scopedSlots.default()[0]
    }
    if (!slot.componentOptions || slot.componentOptions.tag !== 'el-form') {
      return h('span', '不是el-form')
    }
    // 查询方式 like,in,=
    const operatorRules = {}
    const model = slot.componentOptions.propsData.model || {}
    slot.data ? '' : slot.data = {}
    slot.data.staticClass = (slot.data.staticClass || '') + ' c-form'
    const width = 100 / this.column
    if (this.bottom && slot.componentOptions.children.length > 0) {
      slot.componentOptions.children.push(h('el-form-item', {}, [
        h('el-button', { props: { type: 'primary', loading: this.loading }, on: { click: () => {
          if (slot.componentInstance) {
            slot.componentInstance.resetFields()
          }
          this.$emit('reset')
        } }}, '重置'),
        h('el-button', { props: { type: 'primary', loading: this.loading }, on: { click: () => {
          slot.componentInstance.validate().then(() => {
            const otherFilters = []
            for (const [key, value] of Object.entries(model)) {
              if (isNone(value)) {
                continue
              }
              otherFilters.push(filtersItem(key, value, operatorRules[key]))
            }
            this.$emit('confirm', otherFilters)
          }).catch(err => {
            this.$emit('validate-error', err)
          })
        } }}, '确定')
      ]))
    }
    const hasBottomSlot = this.$scopedSlots.bottom instanceof Function
    if (hasBottomSlot) {
      slot.componentOptions.children.push(...this.$scopedSlots.bottom())
    }
    for (let i = 0; i < (slot.componentOptions.children || []).length; i++) {
      const child = slot.componentOptions.children[i]
      child.data ? '' : child.data = {}
      child.data.staticClass = (child.data.staticClass || '') + ' c-form-item'
      const attrs = child.data.attrs || {}
      child.data.staticStyle = child.data.staticStyle || {}
      if (attrs.span !== undefined) {
        child.data.staticStyle.flex = `0 0 ${width * attrs.span}%`
      } else {
        child.data.staticStyle.flex = `0 0 ${width}%`
      }
      child.data.staticStyle.paddingLeft = `${this.gutter}px`
      child.data.staticStyle.paddingRight = `${this.gutter}px`
      if ((this.bottom || hasBottomSlot) && i >= slot.componentOptions.children.length - 1) break
      child.componentOptions ? '' : child.componentOptions = {}
      const propsData = child.componentOptions.propsData || {}
      if (propsData.prop !== undefined && attrs.operator !== undefined) {
        operatorRules[propsData.prop] = attrs.operator || 'like'
      }
      for (const item of child.componentOptions.children || []) {
        item.data = item.data || {}
        item.data.staticStyle = item.data.staticStyle || {}
        item.data.staticStyle.width = '100%'
      }
    }
    return slot
  }
}

export default {
  install(Vue) {
    Vue.component(formContainer.name, formContainer)
  }
}
